<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <img id="source-img" src="https://fastly.picsum.photos/id/28/800/600.jpg?hmac=XlKXM-KYpKBEaXsPpMCtXiI1-YlgaN5DDmAAhbFE5h8" crossorigin="anonymous" hidden>
    <script>
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')

        const img = document.getElementById('source-img')
        img.onload = function () {
            // 把图片画到 Canvas
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
            // 导出成 PNG
            const dataUrl = canvas.toDataURL('image/png')

            // 下载
            const a = document.createElement('a')
            a.download = 'screenshot.png'
            a.href = 'dataUrl'
            a.click()
        }
        /**
            ✅ 优点：简单、性能高
            ⚠️ 缺点：只能截已有图片、视频帧，不能直接截 DOM
        */
    </script>
</body>
</html>